<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>找回密码</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/common/common.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/register.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.js"></script>
</head>
<body>
	<header>
    <ul class="clearfix">
        <li><img src="${pageContext.request.contextPath}/img/logo.png"/></li>
        <li class="register"><a href="#">找回密码</a></li>
    </ul>
	</header>
	<div id="main">
	    <div class="center">
	        <h4>输入手机号，快速找回密码</h4>
	        <p class="error-mpt"></p>
	        <ul class="vali">
	            <li class="phone"><input type="text" maxlength="11" id="phone" name="phone" placeholder="手机号"/></li>
	            <li class="get">
	            	<input type="text" name="Number" placeholder="验证码"/><input type="hidden" id="checkNumber"/><button id="getNumber">获取验证码</button>
	            </li>
	            <li class="btn_next"><button id="btn_next">下一步</button></li>
	            <li class="return"><button id="return">返回登录</button></li>
	        </ul>
	        <ul class="password hide">
	            <li class="pwd"><input type="password" name="pwd" placeholder="新密码" id="password"/></li>
	            <li class="confirmPwd"><input type="password" name="confirmPwd" placeholder="确认密码" id="rePassword" onblur="checkPassword()"/></li>
	            <li class="submit"><button id="submit" disabled="disabled">提交</button></li>
	        </ul>
	    </div>
	</div>
	<footer>
	    <p>Copyright © 2017 dico.com</p>
	</footer>
	<div id="mask" style="z-index: 5" class="hide">
	    <div class="alert" style="z-index: 10">
	        <p>找回密码</p>
	        <div>密码修改成功！</div>
	    </div>
	</div>
	<script>
	    //发送验证码倒计时
	    $("#getNumber").click(function(){
	    	var phone = $("#phone").val();
	    	if(!(/^1[34578]\d{9}$/.test(phone))){
	    		$('.error-mpt').css('visibility','visible').html('请输入正确的手机号码');
	    	}else{
		    	$.ajax({
		    		type:"get",
		    		url:"${pageContext.request.contextPath}/distributorUser/checkPhone",
		    		data:{"phone":phone},
		    		success:function(data){
		    			if(data == 1){
		    				$(this).css("background-color","#F5C53A");
	    			        $(this).attr("disabled",true);
	    			        //alert(phone);
	    			        var s=60;
	    			        var timer=setInterval(function(){
	    			            s--;
	    			            $("#getNumber").html(s+"秒重新发送");
	    			            if(s==0){
	    			                clearInterval(timer);
	    			                $(this).html("获取验证码");
	    			                $(this).css("background-color","#F5D989");
	    			                $(this).attr("disabled",false);
	    			            }
	    			        }.bind(this),1000);
	    			        $.ajax({
	    			        	type:"get",
	    			        	url:"${pageContext.request.contextPath}/distributorUser/sendMessage",
	    			        	data:{"phone":phone},
	    			        	success:function(data){
	    			        		$("#checkNumber").val(data);
	    			        	}
	    			        })
	    			        $('.error-mpt').css('visibility','hidden');
		    			}else if(data == 0){
		    				$('.error-mpt').css('visibility','visible').html('发送失败,该手机号未注册');
		    			}
		    			
		    		}
		    	})
	    	}
	    });
	    /* function sms(){
	    	var phone = $("#phone").val();
	        alert(phone);
	        window.location.href = "/DistributorSystem/distributorUser/sendMessage?tel="+phone;
	        alert(111);
	    } */
	    
	    //下一步
	    $("#btn_next").click(function(){
	    	var number = $("input[name=Number]").val();
	    	var checkNumber = $("#checkNumber").val();
	    	if(number == checkNumber && number != ""){
	    		$('.error-mpt').css('visibility','hidden');
	    		$(this).parent().parent("ul.vali").addClass("hide").next("ul.password").removeClass("hide");
	    	}else{
	    		$('.error-mpt').css('visibility','visible').html('验证码输入错误');
	    	}
	        
	    });
	    //密码简单验证
	    function checkPassword(){
		    var password = $("#password").val();
		    var rePassword = $("#rePassword").val();
		    if(password == rePassword){
		    	$('.error-mpt').css('visibility','hidden');
		    	$("#submit").removeAttr("disabled");
		    }else{
		    	$("#submit").attr("disabled","disabled");
		    	$('.error-mpt').css('visibility','visible').html('密码输入错误');
		    }
	    }
	  	//模态框
	    $("#submit").click(function(){
	    	var rePassword = $("#rePassword").val();
	    	var tel = $("#phone").val();
	        $.ajax({
	        	type:"post",
	        	url:"/DistributorSystem/distributorUser/updatePassword",
	        	data:{"rePassword":rePassword,
	        		"tel":tel},
	        	dataType:"json",
	        	success:function(data){
	        		if(data.isSuccess == 1){
	        			$('#mask').children('div').children('div').html("密码修改成功");
						$("#mask").removeClass("hide");
						window.setTimeout("goLogin()",1000);
	        		}else{
	        			$('#mask').children('div').children('div').html("密码修改失败");
						$("#mask").removeClass("hide");
						window.setTimeout("goLogin()",1000);
	        		}
	        	}
	        })
	    })
	    
	    function goLogin(){
	    	window.location.href = "/DistributorSystem/distributorUser/gotoLogin";
	  	}
	  	function goPassword(){
	  		window.location.href = "/DistributorSystem/distributorUser/gotoPassword";
	  	}
	    $("#mask").click(function(){
	        $(this).addClass("hide");
	    })
	    $("#return").click(function(){
	        window.location.href="/DistributorSystem/distributorUser/gotoLogin";
	    })
	</script>
</body>
</html>